<template>
  <div class="wrap">
    <p class="p1">商品管理</p>
    <el-button class="btn" type="primary" icon="el-icon-plus" @click="add"
      >添加商品</el-button
    >

    <div class="head">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="formInline.region" @change="change">
            <el-option label="按商品id查询" value="id"></el-option>
            <el-option label="按商品名称查询" value="name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formInline.user" placeholder="关键词"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="body">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="id" width="100"> </el-table-column>
        <el-table-column prop="name" label="信息">
          <template slot-scope="scope">
            <p>{{ scope.row.name }}</p>
            <p>{{ scope.row.subtitle }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格"> </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-if="scope.row.status == 2"
              >已下架<el-button
                type="warning"
                size="mini"
                style="margin-left: 10px"
                @click="changeStaue(scope.row)"
                >上架</el-button
              ></span
            >
            <span style="margin-left: 10px" v-if="scope.row.status == 1"
              >在售<el-button
                type="warning"
                size="mini"
                style="margin-left: 10px"
                @click="changeStaue(scope.row)"
                >下架</el-button
              ></span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small" @click="save(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="foot">
      <page
        :pageSize="pageSize"
        :total="total"
        @handleCurrentChange="handleCurrentChange"
      ></page>
    </div>
  </div>
</template>

<script>
import { getproduct, getsearch, getstatus } from "@/utils/request.js";
import page from "@/components/page.vue";
export default {
  name: "Product",
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 0,
      formInline: {
        user: "",
        region: "按商品id查询",
      },
      e: "",
      tableData: [],
    };
  },
  created() {
    this.getlist();
    this.change();
  },
  methods: {
    getlist() {
      getproduct(this.pageNum).then((res) => {
        // console.log(res);
        this.tableData = res.data.list;
        this.total = res.data.total;
        // this.pageSize = res.data.pageSize;
      });
    },
    // 查询
    onSubmit() {
      if (this.e == undefined || this.e == "id") {
        this.e = "id";
      }
      // console.log(this.e);
      if (this.e == "id") {
        let search = {
          productId: this.formInline.user,
          pageNum: 1,
        };
        getsearch(search).then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.pageSize = res.data.pageSize;
        });
      } else if (this.e == "name") {
        let search = {
          productName: this.formInline.user,
          pageNum: 1,
        };
        getsearch(search).then((res) => {
          this.tableData = res.data.list;
          this.total = res.data.total;
          this.pageSize = res.data.pageSize;
        });
      }
    },
    // 下拉菜单点击事件
    change(e) {
      this.e = e;
      // console.log(this.e);
    },
    // 查看当前行数据 商品详情页
    handleClick(row) {
      // console.log(row);
      this.$router.push({path: "/detail",query: {
        productId:row.id
      }});
    },
    // 点击页码切换页
    handleCurrentChange(e) {
      this.pageNum = e;
      this.getlist();
    },
    // 点击切换状态
    changeStaue(row) {
      // console.log(row.status);
      // console.log(row.id);
      if (row.status == 1) {
        let status = {
          productId: row.id,
          status: 2,
        };
        // 提示模态弹框
        this.$confirm("确定要下架该商品?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "下架成功!",
            });
            getstatus(status).then((res) => {
              // console.log(res);
            });
            this.getlist();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else if (row.status == 2) {
        let status = {
          productId: row.id,
          status: 1,
        };
        this.$confirm("确定要上架该商品?", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$message({
              type: "success",
              message: "上架成功!",
            });
            getstatus(status).then((res) => {
              // console.log(res);
            });
            this.getlist();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      }
    },
    // 添加商品
    add() {
       this.$router.push({path: "/save"});
    },
    // 编辑
    save(row){
      this.$router.push({path: "/save",query: {
        id:row.id
      }});
    }
  },
  components: {
    page,
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  height: calc(100vh - 120px);
  // height: 100vh;
  position: relative;
  .p1 {
    text-align: left;
    font-size: 40px;
    margin: 10px 0 20px 0;
  }
  .btn {
    position: absolute;
    right: 20px;
    top: 0px;
  }
  .head {
    text-align: left;
  }
  .foot {
    text-align: left;
    padding: 20px 0 50px 0;
  }
}
</style>
